<template>
  <view>
    <view class="classVideo-item" v-for="(item, index) in list" :key="index"  @click="$api.handleMenu(`/pages/videoDetails/videoDetails?id=${item.id}`)">
      <view class="classVideo-item-videoBox">
        <view v-if="showId != item.id" class="_video_img_box" @tap="showVideo(item.id)">
          <image class="_video_img" :src="item.icon" mode="aspectFill"></image>
          <image
              class="_video_play"
              src="/static/img/play.png"
              mode="aspectFill"
          ></image>
        </view>

        <video
            v-if="showId == item.id"
            class="_video"
            :src="item.url"
            controls
            show-mute-btn
            @play="getPlayVideo"
            :data-videoId="item.id"
            :id="'video' + item.id"
            show-progress
            type="video/mp4"
            controls="controls"
            autoplay="true"
        ></video>
      </view>
      <view class="classVideo-item-content">
        <view class="classVideo-item-content-title">
          <view class="_title-val"><text>标题：</text></view>
          <view class="_title-label"
          ><text>{{ item.name }}</text></view
          >
        </view>
        <view class="classVideo-item-content-bottom">
          <view class="classVideo-item-content-time">
            <view class="_title-val"><text>发布时间：</text></view>
            <view class="_title-label"><text>{{ item.createTime | createTime(that) }}</text></view>
            <view class="_title-abc">
              <image src="/static/img/borwer.png" class="image_2"/>
              <text class="text_1 text_7">{{item.readTimes}}</text>
            </view>
          </view>

          <view v-if="isVideoLink">
            <view
                class="classVideo-item-content-badge"
                @click="onLinkVideo(item)"
                v-if="item.dzTimes == 0"
            >
              <image class="_badge-aixin" src="/static/img/aixin-icon.png" mode=""></image>
            </view>
            <view class="classVideo-item-content-badge" v-if="item.dzTimes > 0">
              <image
                  class="_badge-aixin"
                  src="/static/img/aixin-on-icon.png"
                  mode=""
              ></image>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  props:{
    //展示视频id
    showId:{
      type:String,
      default:''
    },
    //视频数据
    list:{
      type:Array,
      default(){
        return []
      }
    },
    //是否要展示点赞按钮
    isVideoLink:{
      type:Boolean,
      default () {
        return false
      }
    }
  },
  data(){
    return {
      that:this,
    }
  },
  filters:{
    //发布时间
    createTime(time,that){
      return that.$moment(time).format('YYYY-MM-DD HH:mm:ss')
    },
  },
  methods:{
    //获取视频信息
    getPlayVideo(e){
      this.$emit('getPlayVideo',e)
    },
    //查看视频信息
    showVideo(id){
      this.$emit('showVideo',id)
    },
    //视频点赞
    onLinkVideo(item) {
      this.$emit('linkVideo',item)
    }
  }
}
</script>

<style scoped lang="scss">
.classVideo-item {
  width: calc(100% - 60rpx);
  background-color: #ffffff;
  box-shadow: 0px 4rpx 31rpx 1px rgba(201, 201, 201, 0.75);
  border-radius: 10rpx;
  margin: 30rpx auto;
  .classVideo-item-videoBox {
    width: 100%;
    height: 360rpx;
    ._video {
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.72);
      border-radius: 10rpx 10rpx 0px 0px;
    }
    ._video_img_box {
      width: 100%;
      height: 100%;
      position: relative;
      overflow: hidden;
    }
    ._video_img {
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.72);
      border-radius: 10rpx 10rpx 0px 0px;
    }
    ._video_play {
      position: absolute;
      width: 80rpx;
      height: 80rpx;
      left: calc(50% - 40rpx);
      bottom: calc(50% - 40rpx);
    }
  }
  .classVideo-item-content {
    width: 100%;
    padding: 17rpx 38rpx 29rpx;
    box-sizing: border-box;
    .classVideo-item-content-title {
      width: 100%;
      display: flex;
      flex-wrap: nowrap;
      justify-content: flex-start;
      font-size: 30rpx;
      ._title-val {
        color: #333;
        white-space: nowrap;
      }
      ._title-label {
        color: #999;
      }
    }
    .classVideo-item-content-bottom {
      width: 100%;
      display: flex;
      flex-wrap: nowrap;
      justify-content: space-between;
      align-items: center;
      margin-top: 33rpx;
      .classVideo-item-content-time {
        display: flex;
        flex-wrap: nowrap;
        justify-content: flex-start;
        font-size: 30rpx;
        flex:1;
        ._title-val {
          color: #333;
        }
        ._title-label {
          color: #999;
        }
        ._title-abc{
          text-align: right;
          flex: 1;
        }
      }
      .classVideo-item-content-badge {
        width: 45rpx;
        height: 40rpx;
        ._badge-aixin {
          width: 100%;
          height: 100%;
        }
      }
    }
  }
}
.text_7{
  font-size: 28rpx;
  white-space: nowrap;
  margin-left: 14rpx;
}
.image_2{
  margin-bottom: 5rpx;
  width: 31rpx;
  height: 23rpx;
  opacity: 0.6;
  vertical-align: middle;
}
</style>
